<template>
	<div class="wrapper">

		<el-card class="login-card">
			<div class="card-header">
				<img class="logo" src="@/assets/image/common/logo.png" />
				<div class="title">小米商城管理系统</div>
			</div>
			<el-form class="card-body" :model="formData" :rules="rules" @submit.native.prevent="login" ref="loginForm">
				<el-form-item prop="account">
					<el-input placeholder="邮箱/手机号码" v-model="formData.account" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input placeholder="密码" v-model="formData.password" type="password" prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button :loading="loading" class="w-100" type="primary" native-type="submit">登录</el-button>
				</el-form-item>
			</el-form>
		</el-card>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					account: '',
					password: ''
				},
				rules: {
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}, {
						validator: (rule, value, callback) => {
							if (!this.$regular.phoneNumber.test(value) && !this.$regular.email.test(value)) {
								callback(new Error('账号不存在'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, {
						pattern: this.$regular.password,
						message: '密码错误',
						trigger: 'blur'
					}]
				},
				loading: false
			}
		},
		methods: {
			login() {
				new Promise((resolve, reject) => {
					this.$refs.loginForm.validate(valid => {
						if (valid) {
							resolve();
						} else {
							reject();
						}
					});
				}).then(() => {
					this.loading = true;

					const {
						account,
						password
					} = this.formData;
					this.$util.request('/login', {
						account,
						password
					}, (res) => {
						if (res.state == 'ok') {
							this.$store.commit('login', res.loginUser);
							this.findMenus();
						} else {
							this.loading = false;
							this.$util.msg(res.msg);
						}
					});
				});
			},
			findMenus() {
				this.$util.request('/menu', {}, (res) => {
					this.loading = false;
					if (res.length == 0) return this.$util.msg('您的可用菜单为空，请联系管理员');

					this.$router.push({
						name: 'workbench',
						params: {
							menus: res
						}
					});
					this.$message.success('亲爱的管理员，欢迎您~');
				}, true);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: $bg-colorful;
	}

	.login-card {
		text-align: center;
		width: 430px;
		margin: auto;
		margin-top: 15vh;
		padding: 30px 20px;
		border: none;
		border-radius: 10px;
		background-color: rgba(#fff, .1);
		box-shadow: inset 0 0 15px 0 #fff;

		.card-header {
			margin-bottom: 25px;

			.logo {
				width: 50px;
				height: 50px;
			}

			.title {
				color: #fff;
				font-size: 28px;
				margin-top: 10px;
			}
		}

		.card-body {

			/deep/ {
				button,
				input {
					height: 45px;
				}
			}
		}
	}
</style>
